<template>
    <div class="user-history-container">
      <el-card class="search-card">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="设备名称">
            <el-input v-model="searchForm.deviceName" placeholder="请输入设备名称"></el-input>
          </el-form-item>
          <el-form-item label="危急程度">
            <el-select v-model="searchForm.level" placeholder="请选择类型" clearable>
              <el-option label="低" :value=1></el-option>
              <el-option label="中" :value=2></el-option>
              <el-option label="高" :value=3></el-option>
              <el-option label="紧急(仅报修)" :value=4></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否已处理">
            
              <el-checkbox 
                :checked="searchForm.resolved === 1"
                @change="(val:any) => searchForm.resolved = val ? 1 : undefined"
                :disabled="searchForm.resolved === 0"
              >已处理</el-checkbox>
              <el-checkbox 
                :checked="searchForm.resolved === 0"
                @change="(val:any) => searchForm.resolved = val ? 0 : undefined"
                :disabled="searchForm.resolved === 1"
              >未处理</el-checkbox>
            
            
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="searchForm.timeRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <el-card class="table-card">
        <el-tabs v-model="activeTab" @tab-click="handleTabChange">
          <el-tab-pane label="巡检记录" name="inspection">
            <inspection-history-table 
              :data="inspectionHistory" 
              :loading="loading"
            />
          </el-tab-pane>
          <el-tab-pane label="预警记录" name="warning">
            <warning-history-table 
              :data="warningHistory" 
              :loading="loading"
            />
          </el-tab-pane>
          <el-tab-pane label="报修记录" name="repair">
            <repair-history-table 
              :data="repairHistory" 
              :loading="loading"
            />
          </el-tab-pane>
        </el-tabs>
  
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.current"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pagination.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
          ></el-pagination>
        </div>
      </el-card>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import { 
    getUserInspectionHistory,
    getUserWarningHistory,
    getUserRepairHistory
  } from '@/api/user'
  import InspectionHistoryTable from '@/components/InspectionHistoryTable.vue'
  import WarningHistoryTable from '@/components/WarningHistoryTable.vue'
  import RepairHistoryTable from '@/components/RepairHistoryTable.vue'
  
  interface searchFormType {
    deviceName?: string,
    level?: number,
    timeRange?: Date[],
    resolved?: number
  }
  // 搜索表单
  const searchForm = ref<searchFormType>({})
  
  // 分页
  const pagination = reactive({
    current: 1,
    size: 10,
    total: 0
  })
  
  // 标签页
  const activeTab = ref('inspection')
  
  // 数据
  const inspectionHistory = ref([])
  const warningHistory = ref([])
  const repairHistory = ref([])
  const loading = ref(false)
  // 获取巡检历史
  const fetchInspectionHistory = async () => {
    try {
      loading.value = true
      const params = {
        pageNum: pagination.current,
        pageSize: pagination.size,
        deviceName: searchForm.value?.deviceName,
        startTime: searchForm.value?.timeRange?.[0],
        endTime: searchForm.value?.timeRange?.[1],
      }
      
      const res = await getUserInspectionHistory(params)
      inspectionHistory.value = res.data.records
      pagination.total = res.data.total
    } catch (error) {
      ElMessage.error('获取巡检历史失败')
    } finally {
      loading.value = false
    }
  }
  
  // 获取预警历史
  const fetchWarningHistory = async () => {
    try {
      loading.value = true
      const params = {
        pageNum: pagination.current,
        pageSize: pagination.size,
        deviceName: searchForm.value?.deviceName,
        startTime: searchForm.value?.timeRange?.[0],
        endTime: searchForm.value?.timeRange?.[1],
        level: searchForm.value?.level,
        resolved: searchForm.value?.resolved
      }
      
      const res = await getUserWarningHistory(params)
      warningHistory.value = res.data.records
      pagination.total = res.data.total
    } catch (error) {
      ElMessage.error('获取预警历史失败')
    } finally {
      loading.value = false
    }
  }
  
  // 获取报修历史
  const fetchRepairHistory = async () => {
    try {
      loading.value = true
      const params = {
        pageNum: pagination.current,
        pageSize: pagination.size,
        deviceName: searchForm.value?.deviceName,
        startTime: searchForm.value?.timeRange?.[0],
        endTime: searchForm.value?.timeRange?.[1],
        resolved: searchForm.value?.resolved,
        level: searchForm.value?.level
      }
      
      const res = await getUserRepairHistory(params)
      repairHistory.value = res.data.records
      pagination.total = res.data.total
    } catch (error) {
      ElMessage.error('获取报修历史失败')
    } finally {
      loading.value = false
    }
  }
  
  // 标签页切换
  const handleTabChange = () => {
    pagination.current = 1
    if (activeTab.value === 'inspection') {
      fetchInspectionHistory()
    } else if (activeTab.value === 'warning') {
      fetchWarningHistory()
    } else {
      fetchRepairHistory()
    }
  }
  
  // 搜索
  const handleSearch = () => {
    pagination.current = 1
    if (activeTab.value === 'inspection') {
      fetchInspectionHistory()
    } else if (activeTab.value === 'warning') {
      fetchWarningHistory()
    } else {
      fetchRepairHistory()
    }
  }
  
  // 重置搜索
  const resetSearch = () => {
    searchForm.value = {}
    pagination.current = 1
    if (activeTab.value === 'inspection') {
      fetchInspectionHistory()
    } else if (activeTab.value === 'warning') {
      fetchWarningHistory()
    } else {
      fetchRepairHistory()
    }
  }
  
  // 分页
  const handleSizeChange = (val: number) => {
    pagination.size = val
    if (activeTab.value === 'inspection') {
      fetchInspectionHistory()
    } else if (activeTab.value === 'warning') {
      fetchWarningHistory()
    } else {
      fetchRepairHistory()
    }
  }
  
  const handleCurrentChange = (val: number) => {
    pagination.current = val
    if (activeTab.value === 'inspection') {
      fetchInspectionHistory()
    } else if (activeTab.value === 'warning') {
      fetchWarningHistory()
    } else {
      fetchRepairHistory()
    }
  }
  
  onMounted(() => {
    fetchInspectionHistory()
  })
  </script>
  
  <style scoped>
  .user-history-container {
    padding: 20px;
  }
  
  .search-card {
    margin-bottom: 20px;
  }
  
  .table-card {
    margin-bottom: 20px;
  }
  
  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  </style>